<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{margin:0;padding:0;}
		body{background-color: #cdcdcd;}
		.yi{
			color: #ddd;
			font-size: 24px;
			line-height: 50px;
			float: left;
		}
		h2{
			height: 31px;
			padding:20px 0;
		}
		span{
			float: right;
			background-color: #E6E6FA;
			font-size: 14px;
			padding:0 5px;
			border-radius: 10px;
		}
		#text{
			width: 360px;
			height: 22px;
			margin: 12px 0 0 0;
			text-indent: 1em;
			font-size: 12px;
			float: right;
			border-radius: 5px;
		}
		.center{
			margin:0 auto;
			width: 600px;
		}
		.top{
			height: 50px;
			background-color: #000;
		}
		li {
			list-style: none;
		    height: 32px;
		    line-height: 32px;
		    background: #fff;
		    position: relative;
		    margin-bottom: 10px;
		    padding: 0 45px;
		    border-radius: 3px;
		    border-left: 5px solid #629A9C;
		    box-shadow: 0 1px 2px rgba(0,0,0,0.07);
		}
		li input {
		    position: absolute;
		    top: 4px;
		    left: 10px;
		    width: 22px;
		    height: 22px;
		    cursor: pointer;
		}
		li a {
		    position: absolute;
		    top: 2px;
		    right: 5px;
		    display: inline-block;
		    width: 14px;
		    height: 12px;
		    border-radius: 14px;
		    border: 6px double #FFF;
		    background: #CCC;
		    line-height: 14px;
		    text-align: center;
		    color: #FFF;
		    font-weight: bold;
		    font-size: 14px;
		    cursor: pointer;
		}
		p {
		    display: block;
		    margin-block-start: 1em;
		    margin-block-end: 1em;
		    margin-inline-start: 0px;
		    margin-inline-end: 0px;
		}
		.hide{
			display: none;
		}
		ol li{
			opacity: 0.3;
		}
	</style>
	<script src="jquery.min.js"></script>
	<script type="text/javascript">
		$(()=>{
			var shuzu = []
			function xinxin(){
				var str = ""
				var stra = ""
				$("ul li").each(function(index,iteam){
					var hai1 = iteam.getElementsByTagName('p')[0].innerHTML
					stra = stra + `name,${hai1},done,false;`
					$(".zhengzai h2 span").html(index + 1)
				})
				$("ol li").each(function(index,iteam){
					var hai2 = iteam.getElementsByTagName('p')[0].innerHTML
					stra = stra + `name,${hai2},done,true;`
					$(".yijing h2 span").html(index + 1)
				})
					str = `${stra}]`
				localStorage.setItem("jin",String(str).replace(";]",""))
			}
			$("#li a").click(function(){
				var ind = $(this).parent()
				ind.remove()
				xinxin()
			})
			$("li input").click(function(){
				var ind = $(this).parent()
				if(this.checked){
					console.log(1)
					var newaa = ind.clone(true)
					newaa.appendTo($("ol"))
					ind.remove()
				}
				else{
					var newaa = ind.clone(true)
					newaa.appendTo($("ul"))
					ind.remove()
				}
				var ind = $(this).parent()
				xinxin()				
			})
			shuaxina()
			function shuaxina(){
				var hai = localStorage.getItem("jin")
				var hai1 = String(hai).split(";")
				for(var i = 0; i < hai1.length; i ++){
					var heihei = String(hai1[i]).split(",")
					obj = {}
					var obj0 = heihei[0]
					var obj1 = heihei[1]
					var obj2 = heihei[2]
					var obj3 = heihei[3]
					obj[obj0] = obj1
					obj[obj2] = obj3
					if(obj.done == "false"){
						$("#li p").html(obj1)
						var newli = $("#li").clone(true)
						newli.attr("id","")
						newli.removeClass("hide")
						newli.appendTo($("ul"))
						$("#text").val("")
					}
					else if(obj.done == "true"){
						$("#li p").html(obj1)
						var newli = $("#li").clone(true)
						newli.attr("id","")
						newli.removeClass("hide")
						newli.appendTo($("ol"))
						$("#text").val("")
					}
				}
			}
			$("#text").keydown(function(e){
				if(e.key == "Enter" & $("#text").val() != ""){
					var hai = []
					$("#li p").html($("#text").val())
					var newli = $("#li").clone(true)
					newli.attr("id","")
					newli.removeClass("hide")
					newli.appendTo($("ul"))
					$("#text").val("")
					xinxin()
				}
			})
			$("ol li input").attr("checked",true)
			xinxin()
		})
	</script>
</head>
<body>
	<div class="top">
		<div class="center">
			<div class="yi">ToDoList</div>
			<input type="text" name="" id="text" placeholder="添加ToDo">
		</div>
	</div>
	<div class="body">
		<div class="center">
			<div class="zhengzai">
				<h2>正在进行<span>0</span></h2>
				<ul>
					
				</ul>
			</div>
			<div class="yijing">
				<h2>已经完成<span>0</span></h2>
				<ol>
					
				</ol>
			</div>

		</div>
	</div>
	<li class="hide" id="li">
		<input type="checkbox" name="">
		<p></p>
		<a href="#">_</a>
	</li>
</body>
</html>